<template>
    <div class="home">
        <Banner :banners="banners" :duration="2000"></Banner>
        <Channels @changeId = "getChannelId"></Channels>
        <Loading v-show="isLoading"></Loading>
        <NewsList v-show="!isLoading" :news="news"></NewsList>
        <Top></Top>
    </div>

</template>

<script>
import Banner from "@/components/Banner"
import Channels from "@/components/news/Channels"
import NewsList from "@/components/news/NewsList"
import Top from "@/components/Top"
import Loading from "@/components/Loading"
import {getNews} from "@/services/newsService"
export default {
    components:{
        Banner,
        Channels,
        NewsList,
        Loading,
        Top
    },
    data() {
        return {
            banners:[
                { name:"新闻咨询", url:require("@/assets/images/ban1.jpg") },
                { name:"新闻咨询", url:require("@/assets/images/ban2.jpg") },
                { name:"新闻咨询", url:require("@/assets/images/ban3.jpg") },
                { name:"新闻咨询", url:require("@/assets/images/ban4.jpg") }
            ],
            news:[],
            isLoading:true
        }
    },
    methods: {
        async getChannelId(channelId){
            this.isLoading = true
            var resp = await getNews(channelId,1,10)
            this.news = resp.contentlist
            console.log(resp.contentlist)
            this.isLoading = false
        }
    },
}
</script>

<style>

</style>